<template>
	<div class="content apply">
		<heads :current='-1'></heads>
		<div class="main_contact" :style="{ backgroundImage: contact, padding: '1rem 0' }">
			<div class="m">
				<div class="grow" style="padding-left: 0.2rem; padding-right: 0.2rem;padding-top: 0">
					<span style="margin-top: 0">{{ $t('apply.description') }}</span>
					<span>{{ $t('apply.faqNote') }}</span>
				</div>
				<div class="form">
					<p class="title">{{ $t('apply.getInTouch') }}</p>
          <el-form :model="ruleForm" :rules="rules" ref="formRef" :disabled="loading">
            <el-form-item prop="nickname">
              <div class="label required">
                <p>{{ $t('apply.name') }}</p>
                <div class="change">
                  <el-input v-model="ruleForm.nickname" type="text" :placeholder="$t('apply.namePlaceholder')" name="" id="" value="" />
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="email">
              <div class="label required">
                <p>{{ $t('apply.email') }}</p>
                <div class="change">
                  <el-input v-model="ruleForm.email"  :placeholder="$t('apply.emailPlaceholder')" name="" id="" value="" />
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="password">
              <div class="label required">
                <p>{{ $t('login.password') }}</p>
                <div class="change">
                  <el-input v-model="ruleForm.password"  :placeholder="$t('login.passwordRequired')" name="" id="" value="" />
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="phone">
              <div class="label required">
                <p>{{ $t('apply.phone') }}</p>
                <div class="change">
                  <el-input v-model="ruleForm.phone"  type="text" :placeholder="$t('apply.phonePlaceholder')" name="" id="" value="" />
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="company_name">
              <div class="label required">
                <p>{{ $t('apply.companyName') }}</p>
                <el-input v-model="ruleForm.company_name" type="textarea"  name="" :placeholder="$t('apply.companyPlaceholder')" rows="" cols=""></el-input>
              </div>
            </el-form-item>
            <el-form-item prop="address">
              <div class="label required">
                <p>{{ $t('apply.address') }}</p>
                <el-input v-model="ruleForm.address" type="textarea"  name="" :placeholder="$t('apply.addressPlaceholder')" rows="" cols=""></el-input>
              </div>
            </el-form-item>
            <el-form-item prop="share_url">
              <div class="label required">
                <p>{{ $t('apply.termsTitle') }}</p>
                <el-input type="textarea"  v-model="ruleForm.share_url" :placeholder="$t('apply.termsNote')"></el-input>
              </div>
            </el-form-item>
            <el-form-item prop="abn">
              <div class="label">
                <p>{{ $t('apply.abn') }}</p>
                <el-input type="textarea" v-model="ruleForm.abn" :placeholder="$t('apply.abnPlaceholder')" rows="" cols=""></el-input>
              </div>
            </el-form-item>
          </el-form>
					<el-button :loading="loading" class="submit" @click="submit">{{ $t('apply.submit') }}</el-button>
				</div>
			</div>
		</div>
		<foot></foot>
	</div>
</template>

<script>
import { http } from "@/api/api";

export default {
  computed: {
    banner() {
      return this.$store.state.banners || {}
    },
    // 产品头部-3-Hour Sunset Fishing Cruise
    contact() {
      return (this.banner['contact'] || { url: '' }).url
    },
    rules() {
      return {
        nickname: [
          { required: true, message: this.$t('apply.namePlaceholder'), trigger: 'blur' }
        ],
        email: [
          { required: true, message: this.$t('apply.emailPlaceholder'), trigger: 'blur' },
          { type: 'email', message: this.$t('apply.emailPlaceholder'), trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: this.$t('login.passwordRequired'), trigger: 'blur' }
        ],
        phone: [
          { required: true, message: this.$t('apply.phonePlaceholder'), trigger: 'blur' }
        ],
        company_name: [
          { required: true, message: this.$t('apply.companyPlaceholder'), trigger: 'blur' }
        ],
        address: [
          { required: true, message: this.$t('apply.addressPlaceholder'), trigger: 'blur' }
        ],
        share_url: [
          { required: true, message: this.$t('apply.termsNote'), trigger: 'blur' }
        ]
      }
    }
  },
  data() {
    return {
      loading:false,
      ruleForm: {
        nickname: '',
        email: '',
        phone: '',
        company_name: '',
        address: '',
        abn: '',
        share_url: '',
        password: ''
      },

    }
  },
  methods: {
    submit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.loading = true
          http.user.apply({
            ...this.ruleForm,
            role: 2
          }).then(res => {
            this.ruleForm = {
              nickname: '',
              email: '',
              phone: '',
              company_name: '',
              password: '',
              address: '',
              abn: '',
            }
            this.$message({
              message: 'success',
              type: 'success'
            });
          }).finally(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

<style>
.apply .label.required::before {
  content: '*';
  color: #F56C6C;
  margin-right: 4px;
  position: absolute;
  top: 0;
  left: -8px;
}
</style>
